<template>
  <div id="app">
    <el-container>
      <el-header>
        Header
        <button @click="setGlobalState">click</button>
        <button @click="createMicroApp">手动创建微应用</button>
      </el-header>
      <el-container>
          <el-aside width="200px">
            <el-menu :router='true'>
              <el-menu-item index="1">
                <i class="el-icon-menu"></i>
                <span slot="title">导航1</span>
              </el-menu-item>
              <el-menu-item index="/device/deviceTest">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <!-- 主应用渲染区域 -->
            <!-- 主应用渲染区。在触发主应用路由规则时（由路由配置表的 $route.name 判断），将渲染主应用的组件； -->
            <router-view v-show="$route.name"/>
            <!-- 子应用渲染区域，用于挂载子应用节点 -->
            <!-- 微应用渲染区。在未触发主应用路由规则时（由路由配置表的 $route.name 判断），将渲染微应用节点； -->
            <div id="frame" v-show="!$route.name">iframe</div>
          </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { loadMicroApp } from 'qiankun';
import actions from './shared/actions';

export default {
  name: 'App',
  mounted() {
    // 注册一个观察者函数
    actions.onGlobalStateChange((state, prevState) => {
      // state: 变更后的状态; prevState: 变更前的状态
      console.log('主应用观察者：state 改变前的值为 ', prevState);
      console.log('主应用观察者：登录状态发生改变，改变后的 state 的值为 ', state);
    });
  },
  methods: {
    setGlobalState() {
      actions.setGlobalState({
        a: 123,
      });
    },
    createMicroApp() {
      loadMicroApp({
        name: 'VueMicroApp',
        entry: '//localhost:8082',
        container: '#frame',
        props: {
          where: '123',
        },
      });
    },
  },
};
</script>

<style>
#app {
  background: #f0ad4e;
}
</style>
